<template>
  <div class="myContainer">
    <!-- 头部标题 start -->  
    <el-row class="myHeadeTitle">
      <el-col :span="24" class="myPadding_20px">
        <img src="static/images/wbStep4.png" alt="" title=""/>
      </el-col>
    </el-row>
    <!-- 头部标题 end -->
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划名称 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="计划名称" v-model="name" :readonly="disabled"></el-input>
      </el-col>
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划状态 :
      </el-col>
      <el-col :span="4" class="myLineHeight_45px">
        <template>
          <el-radio-group v-model="status" :readonly="disabled">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="-2">禁用</el-radio>
          </el-radio-group>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划ID :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="计划ID" v-model="id" :readonly="disabled"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划所属小区 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="计划所属小区" v-model="area_name" :readonly="disabled"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划模板 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="计划模板" :readonly="disabled" v-model="plan_name"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划对象 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="计划对象" v-model="obj" :readonly="disabled"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划周期 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="计划周期" v-model="cycle" :readonly="disabled"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划负责人 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="计划负责人" :readonly="disabled" v-model="charge_username"></el-input>
      </el-col>
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        联系电话 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="联系电话" :readonly="disabled" v-model="charge_userphone"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划检查人 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="计划检查人" :readonly="disabled" v-model="check_username"></el-input>
      </el-col>
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        联系电话 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="联系电话" :readonly="disabled" v-model="check_userphone"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划内任务数量 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="计划内任务数量" v-model="plancount" :readonly="disabled"></el-input>
      </el-col>
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        计划内单个任务执行期限 :
      </el-col>
      <el-col :span="8">
        <el-input placeholder="计划内单个任务执行期限" v-model="expecttime" :readonly="disabled"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        第一个任务开始时间 :
      </el-col>
      <el-col :span="8">
        <el-date-picker
          v-model="firstplan_starttime"
          type="date"
          :disabled="disabled"
          placeholder="第一个任务开始时间">
        </el-date-picker>
      </el-col>
      <el-col :span="3" class="myLeftMsg">
        第一个任务截至时间 :
      </el-col>
      <el-col :span="8">
        <el-date-picker
          v-model="firstplan_endtime"
          type="date"
          :disabled="disabled"
          placeholder="第一个任务开始时间">
        </el-date-picker>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        最后一次任务开始时间 :
      </el-col>
      <el-col :span="8">
        <el-date-picker
          v-model="lastplan_starttime"
          type="date"
          :disabled="disabled"
          placeholder="第一个任务开始时间">
        </el-date-picker>
      </el-col>
      <el-col :span="3" class="myLeftMsg">
        最后一次任务截至时间 :
      </el-col>
      <el-col :span="8">
        <el-date-picker
          v-model="lastplan_endtime"
          type="date"
          :disabled="disabled"
          placeholder="最后一次任务截至时间">
        </el-date-picker>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="15" :offset="3">
        <el-button type="primary" class="myBgGreen" @click="onClose">关闭</el-button>
      </el-col>
    </el-row>



    <!--选择人员弹出框 start-->
    <!-- <el-dialog title="选择人员" class="myRoleDialog" :visible.sync="newPersonnelDialogVisible" >
      <el-form :inline="true" >
        <el-form-item>
          <el-input v-model="searchKW" class="myDialogSearchText" placeholder="输入关键字进行搜索"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="myBgGreen">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-menu class="mymarginTop_10px">
        <el-menu-item index="1">张三</el-menu-item>
        <el-menu-item index="2">李四</el-menu-item>
        <el-menu-item index="3">王五</el-menu-item>
      </el-menu>
      <div slot="footer">
        <el-button type="primary" class="myBgGreen" @click="newPersonnelDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" @click="newPersonnelDialogVisible = false">提 交</el-button>
      </div>
    </el-dialog> -->
    <!--选择人员弹出框 end-->
  </div>
</template>

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myHeadeTitle{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom:10px; 
  }
  .myHeadeTitle:before,.myHeadeTitle:after{
    content: " ";
    display: block;
    clear: both;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myLineHeight_35px{
    line-height: 35px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }  
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myPadding_20px{
    padding: 20px;
  }
  .myDialogSearchText{
    width: 360px;
  }
  .myLineHeight_45px{
    line-height: 45px;    
  }
</style>

<script>

  import { getMaintenancePlanDetail } from '@/api/maintenanceplan';
  export default {
    data(){
      return{
        status:"",
        newPersonnelDialogVisible:false,
        searchKW:"",
        startDateValue:"",
        endDateValue:"",
        lastStartDateValue:"",
        lastEndDateValue:"",
        disabled:true,
        id:"",
        name:"",
        areaid:"",
        area_name:"",
        obj:"",
        cycle:"",
        plancount:"",
        lastplan_endtime:"",
        firstplan_endtime:"",
        plan_name:"",
        charge_username:"",
        charge_userphone:"",
        check_username:"",
        check_userphone:"",
        expecttime:"",
        firstplan_starttime:"",
        lastplan_starttime:""
      }
    },
    components: {
        
    },
    mounted(){
      document.title = '模板任务计划管理';
      this.id = this.$route.query.id;
      this.onGetMaintenancePlanDetail();
    },
    methods:{     
      onClose:function(){
        this.$router.push({
          path:'/wbjhgl',
          query: {}
        })
      },
      onGetMaintenancePlanDetail(){//拉取计划详细
        let vm=this;
        getMaintenancePlanDetail(vm.id).then(response => {
          let res=response.data;
          vm.name=res.name;//计划名称
          vm.areaid=res.areaid;//所属小区id
          vm.area_name=res.area_name;
          vm.plan_name=res.template_name;//计划模板
          vm.charge_username=res.charge_username;//负责人
          vm.charge_userphone=res.charge_userphone;//负责人电话
          vm.check_username=res.check_username;//检查人
          vm.check_userphone=res.check_userphone;//检查人电话
          vm.expecttime=res.expecttime;//单个任务执行周期
          vm.obj=res.target_objectname;//计划对象
          vm.cycle=res.peroid;//计划周期
          vm.plancount=res.plancount;//计划数量
          vm.firstplan_starttime=res.firstplan_starttime;//第一次任务开始时间
          vm.firstplan_endtime=res.firstplan_endtime;//第一次任务结束时间
          vm.lastplan_starttime=res.lastplan_starttime;//最后一次任务开始时间
          vm.lastplan_endtime=res.lastplan_endtime;//最后一次任务结束时间
          if(res.status!=-2){
            vm.status=1;
          }else{
            vm.status=res.status;//计划状态-2为禁用 其他为启用
          }
          console.log("拉取任务详细成功",res)
        }).catch(error =>{
          console.log("拉取任务详细失败",error)
        })
      }
      

    }
  
  }


</script>



